<template>
  <div id="map"></div>
  <PopupVue ref="PopupVueRef" />
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import PopupVue from './popup.vue'

// 引入云阳县的 GeoJSON 数据（需自行获取或导入）
import chongqing from '../../json/重庆市云阳县乡镇街道.json'
import { areaCount } from '@/api/spotCheck/spotCheck' // 放在同一目录下
console.log(chongqing)
onMounted(() => {
  areaCount().then((res) => {
    init(res.data)
  })
})

const PopupVueRef = ref<InstanceType<typeof PopupVue> | null>(null)

interface ListParams {
  count: number
  shortAddress: string
}

interface DataItem {
  name: string
  value: number
  itemStyle: {
    normal: {
      areaColor: string
    }
  }
}

const init = (list: ListParams[]) => {
  const data: DataItem[] = list.map((i) => ({
    name: i.shortAddress,
    value: i.count || 0,
    itemStyle: {
      normal: {
        areaColor: i.count > 10 ? '#4095E5' : '#7FCAFF'
      }
    }
  }))

  const chart = echarts.init(document.getElementById('map'))

  // 注册地图
  echarts.registerMap('yunyang', chongqing)

  chart.setOption({
    tooltip: {
      trigger: 'item'
    },
    // geo: {
    //   show: true,
    //   map: 'yunyang',
    //   label: {
    //     normal: {
    //       show: false
    //     },
    //     emphasis: {
    //       show: false
    //     }
    //   },
    //   roam: false,
    //   itemStyle: {
    //     normal: {
    //       borderWidth: 5, //设置外层边框
    //       borderColor: '#43edff',
    //       shadowColor: '#284297',
    //       shadowOffsetX: 0,
    //       shadowOffsetY: 0,
    //       shadowBlur: 30
    //     }
    //   }
    // },
    series: [
      {
        name: '数量',
        type: 'map',
        mapType: 'yunyang',
        zoom: 1.2,
        // 提示框
        tooltip: {
          triggerOn: 'mousemove',
          backgroundColor: 'rgba(8, 8, 8, .85)',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        label: {
          normal: {
            formatter: (data) => data.name,
            show: true,
            color: '#fff'
          },
          emphasis: {
            show: true,
            color: '#fff'
          }
        },

        select: {
          label: {
            show: false
          },
          itemStyle: {
            areaColor: '#2b8bf3'
          }
        },

        // 地图上区域块的样式
        itemStyle: {
          // 默认状态下地图的颜色
          normal: {
            areaColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 1,
                color: '#76a3ea'
              },
              {
                offset: 0,
                color: '#4977e2'
              }
            ]),
            // borderType: 'dotted',
            borderColor: '#94bef3',
            borderWidth: 2,
            color: '#fff'
          },

          // 选中状态下地图的颜色
          emphasis: {
            // borderType: 'dotted',
            areaColor: '#2b8bf3'
          }
        },

        data
      }
    ]
  })
  setTimeout(() => {
    chart.resize()
  }, 0)

  // 监听窗口大小变化，调整地图大小
  window.addEventListener('resize', () => {
    chart.resize()
  })

  //监听点击
  chart.on('click', (params) => {
    console.log('点击的区域', params)
    PopupVueRef.value?.show({
      title: params?.name,
      query: { shortAddress: params?.name }
    })
  })
}
</script>

<style scoped lang="scss">
#map {
  width: 100%;
  height: 6.8rem;
}
</style>
